import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from "three/examples/jsm/libs/stats.module.js";
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-08 22:22:06
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-22 22:12:05
 * @FilePath: /three-react/src/createRender.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
function createRender(container) {
  const { clientWidth, clientHeight } = container.current;
  // 创建场景
  const scene = new THREE.Scene();
  // // 创建相机
  const camera = new THREE.PerspectiveCamera(60, clientWidth / clientHeight, 1, 1400);
  camera.position.set(0, 0, 400);
  camera.lookAt(0, 0, 0);

  // 正投影相机
  // const width = window.innerWidth - 200;
  // const height = window.innerHeight;
  // const persert = width/ height;
  // const size = 100
  // const camera = new THREE.OrthographicCamera(-size*persert, size*persert, size, -size, 1, 8000)
  // camera.position.set(0, 100, 0);
  // camera.lookAt(0, 0, 0);




  // 创建webgl渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器窗口大小
  renderer.setSize(clientWidth, clientHeight);
  container.current?.appendChild(renderer.domElement);




  const axesHelper = new THREE.AxesHelper(200);
  scene.add(axesHelper)

  // 环境光
  // const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  // scene.add(ambient);


  //光源设置
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(100, 60, 50);
  scene.add(directionalLight);
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);

  const stats = new Stats();
  stats.dom.style.position='absolute';
  container.current?.appendChild(stats.domElement);

  // 轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', function () {})

  function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera);
    stats.update();
  }
  animate();

  // window.onresize = function() {
  //   const width = window.innerWidth - 200;
  //   const height = window.innerHeight;
  //   const aspect = width / height;
  //   camera.aspect = aspect;
  //   camera.left = -aspect * 100
  //   camera.right = aspect * 100
  //   camera.updateProjectionMatrix();


  //   renderer.setSize(width, height)
  // }分r

  return function (callback) {
    callback(scene, camera, renderer)
  }
}
export default createRender;